<template>
  <div class="app-container">
    <el-row style="height: 800px">
      <el-col :span="5" class="app-container" style="border: 1px solid #DCDFE6;height: 100%;margin-right: 30px;border-radius: 25px">
        <el-button type="primary" style="margin-bottom: 20px" @click="addDig4 = true">新增类目</el-button>
        <el-button type="danger" @click="delChecked">删除选中</el-button>
          <!-- <el-button size="small" type="danger" icon="el-icon-delete" @click="handleClickDel()">删除</el-button> -->
        <el-menu>
          <el-menu-item v-for="(item,index) in queryData" :key="index" @click="queryDictionariesData(item)">
            <i class="el-icon-s-grid" />
            <span slot="title">{{ item.cate_name }}</span>
          </el-menu-item>
        </el-menu>
        <!-- <el-col v-for="(item,index) in queryData" :key="index" :span="24" style="margin-bottom: 20px;border: 1px solid #DCDFE6;">
            <div v-if="item.pid">
              <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                <el-submenu index="1">
                  <template slot="title">
                    <i v-if="item.cate_name=='学员'" class="el-icon-user" />
                    <i v-if="item.cate_name=='课程'" class="el-icon-notebook-2" />
                    <i v-if="item.cate_name=='财务'" class="el-icon-money" />
                    <span>{{ item.cate_name }}</span>
                  </template>
                  <el-menu-item-group v-if="item.cate_name=='学员'">
                    <el-menu-item v-for="(items,indexs) in queryData" :key="indexs" style="padding: 0" index="1-1" @click="StudentClick(items)">
                      <div v-if="items.pid!=null&&items.pid=='1'">
                        {{ items.cate_name }}
                        <el-button v-if="items.institution_id!=0" type="danger" style="float: right;height:100%" @click="delType(items.unid)">删除</el-button>
                      </div>
                    </el-menu-item>
                  </el-menu-item-group>
                  <el-menu-item-group v-if="item.cate_name=='课程'">
                    <el-menu-item v-for="(items,indexs) in queryData" :key="indexs" style="padding: 0" index="1-2" @click="StudentClick(items)">
                      <div v-if="items.pid!=null&&items.pid=='2'">
                        {{ items.cate_name }}
                        <el-button v-if="items.institution_id!=0" type="danger" style="float: right;height:100%" @click="delType(items.unid)">删除</el-button>
                      </div>
                    </el-menu-item>
                  </el-menu-item-group>
                  <el-menu-item-group v-if="item.cate_name=='财务'">
                    <el-menu-item v-for="(items,indexs) in queryData" :key="indexs" style="padding: 0" index="1-3" @click="StudentClick(items)">
                      <div v-if="items.pid!=null&&items.pid=='3'">
                        {{ items.cate_name }}
                        <el-button v-if="items.institution_id!=0" type="danger" style="float: right;height:100%" @click="delType(items.unid)">删除</el-button>
                      </div>
                    </el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
              </el-menu>
            </div>
        </el-col> -->
      </el-col>
      <el-col :span="18" style="border: 1px solid #DCDFE6;height:100%;border-radius: 25px" class="app-container">
        <el-col :span="24">
          <el-button type="primary" style="margin-bottom: 20px" @click="addDig1 = true">新增</el-button>
          <!-- <el-button type="danger" @click="delChecked">删除选中</el-button> -->
        </el-col>
        <!-- 新增数据字典项目 -->
        <el-dialog title="新增数据字典项目" :visible.sync="addDig1" width="768px" @close="addDialogClosed">
          <el-form ref="addData" :model="addData" :rules="rules" label-width="68px">
            <el-row style="padding: 0;margin: 0">
              <el-col :span="12">
                <el-form-item label="项目名称" label-width="90px" prop="project_name">
                  <el-input v-model="addData.project_name" placeholder="请输入项目名称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="排序" prop="sort" label-width="90px">
                  <el-input v-model="addData.sort" placeholder="请输入排序" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="机构id" label-width="90px">
                  <el-input v-model="addData.institution_id" placeholder="请输入机构id" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="栏目id" prop="cate_id" label-width="90px">
                  <el-select v-model="addData.cate_id" placeholder="请选择栏目id">
                    <template v-for="(item,index) in queryData">
                      <el-option v-if="item.pid!=null" :key="index" :label="item.cate_name" :value="item.pid" />
                    </template>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="描述" prop="desc" label-width="90px">
                  <el-input v-model="addData.desc" placeholder="请输入描述" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否开启" prop="is_open" label-width="90px">
                  <el-select v-model="addData.is_open" placeholder="请选择">
                    <el-option label="开启" :value="1" />
                    <el-option label="禁用" :value="0" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否开启月份" label-width="110px" prop="is_month">
                  <el-select v-model="addData.is_month" placeholder="请选择">
                    <el-option label="开启" :value="1" />
                    <el-option label="禁用" :value="0" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否开启年份" label-width="110px" prop="is_year">
                  <el-select v-model="addData.is_year" placeholder="请选择">
                    <el-option label="开启" :value="1" />
                    <el-option label="禁用" :value="0" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="附属如课程编号开头等" label-width="165px" prop="adjunct">
                  <el-input v-model="addData.adjunct" placeholder="请输入附属如课程编号开头" />
                </el-form-item>
              </el-col>
              <el-col :span="24" style="text-align: right">
                <el-button type="primary" @click="addDig1 = false">取消</el-button>
                <el-button type="primary" @click="addproject">提交</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-dialog>
        <!-- 新增类目 -->
        <el-dialog title="新增类目" :visible.sync="addDig4" width="300px">
          <el-form ref="addType" :model="addType" :rules="rules2" label-width="80px">
            <el-form-item label="栏目名称" prop="cate_name">
              <el-input v-model="addType.cate_name" placeholder="请输入栏目名称" />
            </el-form-item>
            <el-form-item label="父类" prop="pid">
              <el-select v-model="addType.pid" placeholder="请选择父类">
                <el-option label="学院" :value="1" />
                <el-option label="课程" :value="2" />
                <el-option label="财务" :value="3" />
              </el-select>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
              <el-input v-model="addType.sort" placeholder="请输入排序" />
            </el-form-item>
            <div style="text-align: center">
              <el-button type="primary" @click="typeClick('addType')">提交</el-button>
            </div>
          </el-form>
        </el-dialog>
        <el-table :data="tableData1" border style="width: 100%">
          <el-table-column type="index" label="序号" width="50" align="center" prop="index" :show-overflow-tooltip="true"/>
          <el-table-column align="center" fixed prop="unid" label="主键ID" :show-overflow-tooltip="true" />
          <el-table-column align="center" prop="project_name" label="项目名称" :show-overflow-tooltip="true" />
          <el-table-column align="center" prop="institution_id" label="机构ID" :show-overflow-tooltip="true" />
          <el-table-column align="center" prop="adjunct" label="课程编号" :show-overflow-tooltip="true" />
          <el-table-column align="center" prop="desc" label="描述" :show-overflow-tooltip="true" />
          <el-table-column align="center" label="操作" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-button size="small" type="success" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" icon="el-icon-delete" @click="handleClick(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 编辑 -->
    <el-dialog title="编辑" :visible.sync="editDig" width="768px">
      <el-form ref="addData2" :model="addData2" label-width="68px">
        <el-row style="padding: 0;margin: 0">
          <el-col :span="12">
            <el-form-item label="项目名称" label-width="90px" prop="project_name">
              <el-input v-model="addData2.project_name" placeholder="请输入项目名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序" prop="sort" label-width="90px">
              <el-input v-model="addData2.sort" placeholder="请输入排序" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="机构id" label-width="90px">
              <el-input v-model="addData2.institution_id" placeholder="请输入机构id" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="栏目id" prop="cate_id" label-width="90px">
              <el-select v-model="addData2.cate_id" placeholder="请选择栏目id">
                <template v-for="(item,index) in queryData">
                  <el-option v-if="item.pid!=null" :key="index" :label="item.cate_name" :value="item.pid" />
                </template>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="描述" prop="desc" label-width="90px">
              <el-input v-model="addData2.desc" placeholder="请输入描述" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否开启" prop="is_open" label-width="90px">
              <el-select v-model="addData2.is_open" placeholder="请选择">
                <el-option label="开启" :value="1" />
                <el-option label="禁用" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否开启月份" label-width="110px" prop="is_month">
              <el-select v-model="addData2.is_month" placeholder="请选择">
                <el-option label="开启" :value="1" />
                <el-option label="禁用" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否开启年份" label-width="110px" prop="is_year">
              <el-select v-model="addData2.is_year" placeholder="请选择">
                <el-option label="开启" :value="1" />
                <el-option label="禁用" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="附属如课程编号开头等" label-width="165px" prop="adjunct">
              <el-input v-model="addData2.adjunct" placeholder="请输入附属如课程编号开头" />
            </el-form-item>
          </el-col>
          <el-col :span="24" style="text-align: right">
            <el-button type="primary" @click="editD">提交</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  addDictionariesData, // 添加数据字典数据
  delDictionariesData, // 删除数据字典数据
  queryDictionariesData, // 查询数据字典数据---列表
  addDictionariesType, // 添加栏目类别
  // delDictionariesType,// 删除数据字典栏目
  queryDictionaries, // 侧边栏所有数据
  } from '@/api/studentRecruit.js'
export default {
    name: 'Index',
    data() {
        return {
          queryName:null,
            addDig1: false,
            editDig: false,
            addDig4: false,
            tableData1: [],//表格数据
            tableData2: [],
            tableData3: [],
            queryData: [],// 数据字典栏目
            addData: {
                project_name: null,
                sort: null,
                institution_id: null,
                cate_id: null,
                desc: null,
                adjunct: null,
                is_open: null,
                is_month: null,
                is_year: null,
                is_delete: 0
            },
            // 编辑
            addData2: {
              unid:null,
                project_name: null,
                sort: null,
                institution_id: null,
                cate_id: null,
                desc: null,
                adjunct: null,
                is_open: null,
                is_month: null,
                is_year: null,
                is_delete: 0
            },
            addType: {
                cate_name: null,
                pid: null,
                sort: null
            },
            NumData: [],
            rules: {
                project_name: [
                    { required: true, message: '请输入名称', trigger: 'blur,change' }
                ],
                sort: [
                    { required: true, message: '请输入排序', trigger: 'blur,change' }
                ],
                institution_id: [
                    { required: true, message: '请输入机构id', trigger: 'blur,change' }
                ],
                cate_id: [
                    { required: true, message: '请选择栏目id', trigger: 'blur,change' }
                ],
                desc: [
                    { required: true, message: '请输入描述', trigger: 'blur,change' }
                ],
                adjunct: [
                    { required: true, message: '请输入附属如课程编号开头', trigger: 'blur,change' }
                ],
                is_open: [
                    { required: true, message: '请选择状态', trigger: 'blur,change' }
                ],
                is_month: [
                    { required: true, message: '请选择状态', trigger: 'blur,change' }
                ],
                is_year: [
                    { required: true, message: '请选择状态', trigger: 'blur,change' }
                ]
            },
            rules2: {
                cate_name: [
                    { required: true, message: '请输入栏目名称', trigger: 'blur,change' }
                ],
                pid: [
                    { required: true, message: '请选择父类', trigger: 'blur,change' }
                ],
                sort: [
                    { required: true, message: '请输入排序', trigger: 'blur,change' }
                ]
            }
        }
    },
    created() {
        this.queryDictionaries()//类别
    },
    methods: {
      // 删除选中
      async delChecked() {
          // for (let i = 0; i < this.checkedData.length; i++) {
          //     console.log('id', this.checkedData[i].unid)
          //     this.loading = true
          //     let delData = {
          //         unid: this.checkedData[i].unid
          //     }
          //     let resData = await delDictionariesData(delData)
          //     if (resData.code == 200) {
          //         this.$message.success('删除' + (i + 1) + '条成功!')
          //         this.queryDictionariesData()
          //         this.loading = false
          //     } else {
          //         this.$message.error('删除失败!')
          //     }
          // }
      },
      // 根据unid来删除字典数据
      handleClick(row) {
      	this.$confirm("您选中的内容删除后将无法恢复，请问是否删除？", "提示", {
      		confirmButtonText: "确定",
      		cancelButtonText: "取消",
      		type: "warning"
      	}).then(() => {
      		delDictionariesData({unid: row.unid}).then(res => {
      			if (res.code == 200) {
      				this.$message.success('删除成功')
              this.queryDictionariesData()
      			} else {
      				this.$message.error("删除失败!")
      			}
      		})
      	}).catch((err) => {
      		console.log(err)
      	});
      },
      // 编辑
      edit(row) {
        this.editDig = true
        console.log(row)
        this.editData = {
          unid:row.unid,
          project_name: row.project_name,
          sort: row.sort,
          institution_id: row.institution_id,
          cate_id: row.cate_id,
          desc: row.desc,
          adjunct: row.adjunct,
          is_open: row.is_open,
          is_month: row.is_month,
          is_year: row.is_year,
          is_delete: 0
        }
      },
      // 编辑数据
      editD() {
        this.editDig = false;
        console.log(this.editData)
        addDictionariesData(this.editData).then(rs => {
          if (rs.code == 200) {
            console.log(rs)
            this.$message.success('编辑成功！')
            this.queryDictionaries()
            this.$forceUpdate()
          } else {
            this.$message.success('编辑失败！')
          }
        })
      },
      // 获取信息 -- 项目
      async queryDictionariesData() {
          let DataCate1 = {
              cate_id: 2
          }
          let resData1 = await queryDictionariesData(DataCate1)
          if (resData1.code == 200) {
              this.$message.success('查询成功！')
              this.tableData1 = resData1.data
          } else {
              this.$message.error('查询失败！')
          }
      },
      // 侧边栏所有数据 - 列表
      async queryDictionaries() {
          let DataCate = {}
          let resData = await queryDictionaries(DataCate)
          if (resData.code == 200) {
              this.queryData = resData.data
              this.$message.success('查询成功！')
              console.log('数据字典栏目', resData.data)
          }else{
            this.$message.error('查询失败！')
          }
      },
      // 新增栏目
      typeClick(addType) {
          this.$refs[addType].validate((valid) => {
              if (valid) {
                  addDictionariesType(this.addType).then(resData => {
                      if (resData.code == 200) {
                          this.$message.success('添加成功！')
                          this.queryDictionaries()
                          this.loading = false
                          console.log(resData)
                      }
                      this.addDig4 = false
                  })
              } else {
                  console.log(valid)
                  return false
              }
          })
      },
      // 新增字典数据
      addproject(addData) {
          this.$refs.addData.validate((valida) => {
            if(!valida) return
            var addDcr = {
              project_name : this.addData.project_name,
              sort : this.addData.sort,
              cate_id : this.addData.cate_id,
              desc : this.addData.desc,
              adjunct : this.addData.adjunct,
              is_open : this.addData.is_open,
              is_month : this.addData.is_month,
              is_year : this.addData.is_year,
              is_delete : this.addData.is_delete,
            }
            console.log(addDcr)
            addDictionariesData(addDcr).then(rs =>{
              if(rs.code == 200){
                this.$message.success('添加成功！')
                this.addDig1 = false;
                this.getList()
              }else{
                this.$message.error('添加失败！')
              }
            })
          })
      },
      // 监听添加用户对话框的关闭事件
      addDialogClosed () {
        this.$refs.addData.resetFields()
      },
      handleOpen(key, keyPath) {
          console.log(key, keyPath)
      },
      handleClose(key, keyPath) {
          console.log(key, keyPath)
      },
    }
}
</script>

<style scoped>

  .text {
    font-size: 14px;
    text-align: center;
    color: blue;
  ;
  }

  .item {
    margin-top: 10px;
    margin-bottom: 18px;
  }
</style>
